<template>

  <div class="col-sm-12">
<!--    <Header></Header>-->
    <el-row :gutter="10">
      <el-col :xs="0" :sm="4" :md="5" :lg="6" :xl="6"><div class="grid-content"></div></el-col>
      <el-col :xs="24" :sm="16" :md="14" :lg="12" :xl="12">
        <el-carousel :interval="4000" type="card" height="200px">
          <el-carousel-item v-for="item in imgList" :key="item.id">
            <div>{{item.title}}</div>
            <div>{{item.heat}}</div>
            <img class="medium" :src="item.src" width="100%" height="100%"/>
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <el-col :xs="0" :sm="4" :md="5" :lg="6" :xl="6"><div class="grid-content"></div></el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :xs="0" :sm="10" :md="8" :lg="6" :xl="6">
          <Sidebar class="trans left"></Sidebar>
      </el-col>
      <el-col :xs="24" :sm="14" :md="16" :lg="18" :xl="18">
          <div class="trans">
            <div v-for="i in count">
              <div style="padding: 14px;">
                <span>{{posts[i]["title"]}}</span>
                <div class="bottom clearfix">
                  <span>
                    <p class="heat">
                      热度: {{ posts[i]["heat"] }}
                    </p>
                    <p class="postType">
                      类型：{{posts[i]["type"]}}
                    </p>
                  </span>
                  <span>
                    <p class="time">
                      {{ posts[i]["time"] }}
                    </p>
                    </span>
                  <router-link :to="'/post/'+posts[i]['id']" class="btn btn-link">查看评论</router-link>
                </div>
              </div>
            </div>
          </div>
          <p v-if="loading" class="trans">加载中...</p>
          <p v-if="noMore" class="trans">没有更多了</p>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import App from "@/App";
import 'element-ui/lib/theme-chalk/display.css';
import {getScrollHeight,getScrollTop,getWindowHeight} from "@/assets/js/myjs";
import Header from "@/components/header";
import Sidebar from "@/components/Sidebar";
export default {
  components: {Sidebar, Header},
  data () {
    return {
      noMore:false,
      loading:true,
      sum:0,
      count: 5,
      posts: [],
      paginate: ['blogs'],
      imgList: [
        {
          id:1,
          src: require("../assets/1.jpg"),
          blogId:0,
          title:"",
          heat:""
        },
        {
          id:2,
          src: require("../assets/2.jpg"),
          blogId:0,
          title:"",
          heat:""
        },
        {
          id:3,
          src: require("../assets/3.jpg"),
          blogId:0,
          title:"",
          heat:""
        }
      ]
    }
  },
  created() {
    console.log("test");
    // this.myCreated();
    this.$http.post('http://localhost:8081/posts')
        .then(res => res.json())
        .then(res=>{
          this.posts=res.message;
        });
    this.sum=this.posts.length;
    this.$http.post('http://localhost:8081/getTopBlog')
        .then(res => res.json())
        .then(res=>{
          this.imgList[0].blogId=res.message[0].id;
          this.imgList[0].title=res.message[0].title;
          this.imgList[0].heat="热度: "+res.message[0].heat;
          this.imgList[1].blogId=res.message[1].id;
          this.imgList[1].title=res.message[1].title;
          this.imgList[1].heat="热度: "+res.message[1].heat;
          this.imgList[2].blogId=res.message[2].id;
          this.imgList[2].title=res.message[2].title;
          this.imgList[2].heat="热度: "+res.message[2].heat;
        });
  },
  mounted(){
    window.addEventListener('scroll', this.load);
  },
  destroyed(){
    window.removeEventListener('scroll', this.load, false);
  },
  methods:{
    jumpTo(){
      this.$router.push('/post/' + this.$data.paginate('blogs').id);
    },
    load () {
      // console.log("1:"+getScrollTop()+"2:"+getWindowHeight()+"3:"+getScrollHeight());
      if(getScrollTop() + getWindowHeight() >= getScrollHeight()-1){
        this.count += 1;
        if(this.count>=this.sum){
          this.noMore=true;
          this.loading=false;
        }
      }
    },
    getLength(){
      for(let item in this.posts){
        this.sum++;
      }
      window.console.log(this.sum);
    },
    myCreated:function () {
      this.$http.post('http://localhost:8081/posts')
          .then(res => res.json())
          .then(res=>{
            this.posts=res.message;
            this.getLength();
          });
      this.$http.post('http://localhost:8081/getTopBlog')
          .then(res => res.json())
          .then(res=>{
            this.imgList[0].blogId=res.message[0].id;
            this.imgList[0].title=res.message[0].title;
            this.imgList[0].heat="热度: "+res.message[0].heat;
            this.imgList[1].blogId=res.message[1].id;
            this.imgList[1].title=res.message[1].title;
            this.imgList[1].heat="热度: "+res.message[1].heat;
            this.imgList[2].blogId=res.message[2].id;
            this.imgList[2].title=res.message[2].title;
            this.imgList[2].heat="热度: "+res.message[2].heat;
          });
    }
  }
}
// export default {
//   el: '#Blog',
//   data() {
//   }
// }
</script>

<style>
.trans
{
  border-radius: 4px;
  /*margin:200px 200px;*/
  background-color:#ffffff;
  /* border:1px solid black; */
  opacity:0.8;
}
/*.el-carousel__item h3 {*/
/*  color: #475669;*/
/*  font-size: 14px;*/
/*  opacity: 0.75;*/
/*  line-height: 200px;*/
/*  margin: 0;*/
/*}*/
.introduction {
  font-size: 13px;
  color: #999;
}
.time {
  text-align: right;
  font-size: 8px;
  color: blueviolet;
}
.heat {
  font-size: 8px;
  color: red;
}

.postType {
  font-size: 8px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
